<template>
  <div>
    <a-card title="用户信息修改" :bordered="false">
      <div>
        <a-tabs defaultActiveKey="1" :tabPosition="tabPosition">
          <a-tab-pane tab="个人信息" key="1">
            <div>
              <a-row :gutter="12">
                <a-col :md="12" :sm="24">
                  <a-form :form="infoForm">
                    <a-form-item
                      label="用户姓名"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-input disabled v-decorator="['userName', {initialValue: user.userName, rules: [{required: true, message: '请输入用户姓名', trigger: 'blur'}]}]" />
                    </a-form-item>
                    <a-form-item
                      label="登录账号"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-input
                        v-decorator="['loginName', {initialValue: user.loginName, rules: [
                          { required: true, message: '请输入登录账号', trigger: 'blur' },
                          { type: 'string', min: 2, message: '登录账号不允许小于2位', trigger: 'blur' }]}]" />
                    </a-form-item>
                    <a-form-item
                      label="用户角色"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-select
                        disabled
                        v-decorator="['roleId', {initialValue: String(user.roleId), rules: [{required: true, message: '请选择角色'}]}]"
                        placeholder="请选择"
                      >
                        <a-select-option v-for="role in roles" :key="role.id">{{ role.name }}</a-select-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item
                      label="备注信息"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                    >
                      <a-input v-decorator="['userInfo', {initialValue: user.userInfo}]" />
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
              <a-form-item>
                <a-button type="primary" @click="submitInfo" style="margin-left: 150px">提交</a-button>
              </a-form-item>
            </div>
          </a-tab-pane>
          <a-tab-pane tab="修改密码" key="2">
            <div class="table-page-search-wrapper" >
              <a-row :gutter="12">
                <a-col :md="12" :sm="24">
                  <a-form :form="pwdForm">
                    <a-form-item
                      label="原密码"
                      :labelCol="newLabelCol"
                      :wrapperCol="newWrapperCol"
                    >
                      <a-input-password
                        v-decorator="['password', {rules: [
                          { required: true, message: '请输入原密码', trigger: 'blur' },
                          { validator: validatePwd, trigger: 'blur' }]}]" />
                    </a-form-item>
                    <a-form-item
                      label="新密码"
                      :labelCol="newLabelCol"
                      :wrapperCol="newWrapperCol"
                    >
                      <a-input-password
                        v-decorator="['loginPwd', {rules: [
                          { required: true, message: '请输入新密码', trigger: 'blur' },
                          { validator: validatePwd, trigger: 'blur' }]}]" />
                    </a-form-item>
                    <a-form-item
                      label="确认密码"
                      :labelCol="newLabelCol"
                      :wrapperCol="newWrapperCol"
                    >
                      <a-input-password
                        v-decorator="['confirmPwd', {rules: [
                          { required: true, message: '请再次确认密码', trigger: 'blur' },
                          { validator: confirmPwd, trigger: 'blur' }]}]" />
                    </a-form-item>
                  </a-form>
                </a-col>
              </a-row>
              <a-form-item>
                <a-button type="primary" @click="submitPwd" style="margin-left: 150px">提交</a-button>
              </a-form-item>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>
<script>
  import md5 from 'md5'
  import { listRole } from '@/api/system/role'
  import { getInfo, editUser, resetPwd } from '@/api/basic/user'
  import { TreeSelect } from 'ant-design-vue'
  export default {
    components: {
      ATreeSelect: TreeSelect
    },
    data () {
      return {
        tabPosition: 'left',
        // 表单对象
        user: {},
        expandedKeys: [1],
        treeData: [],
        avatar: '',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        newLabelCol: {
          xs: { span: 24 },
          sm: { span: 7 }
        },
        newWrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        infoForm: this.$form.createForm(this),
        pwdForm: this.$form.createForm(this),
        // 角色对象
        roles: []
      }
    },
    created () {
      // 获取用户信息
      getInfo()
        .then(res => {
          this.user = res.data.result
        })
      // 用户角色列表
      listRole()
        .then(res => {
          if (res.message !== 'error') {
            this.roles = res.data.result
          } else {
            this.$message.error('操作失败！')
          }
        })
    },
    methods: {
      // 个人信息提交
      submitInfo () {
        const { infoForm: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            editUser(Object.assign(values, {
              'userId': this.user.userId,
              'userType': this.user.userType }))
              .then(res => {
                if (res.message !== 'error') {
                  this.$emit('ok')
                  this.$message.success('修改成功！')
                } else {
                  this.$message.error('操作失败！')
                }
              })
          } else {
          }
        })
      },
      // 密码
      submitPwd () {
        const { pwdForm: { validateFields } } = this
        validateFields((errors, values) => {
          if (!errors) {
            if (this.user.loginPwd === md5(values.password)) {
              resetPwd(Object.assign(values, { 'userId': this.user.userId }))
                .then(res => {
                  if (res.message !== 'error') {
                    this.$message.success('密码重置成功！')
                  } else {
                    this.$message.error('操作失败！')
                  }
                })
            } else {
              this.$message.error('原密码错误！')
            }
          } else {
          }
        })
      },
      // 前端验证密码
      validatePwd (rule, value, callback) {
        const regex = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)(?![a-z0-9]+$)(?![a-z\W_]+$)(?![0-9\W_]+$)[a-zA-Z0-9\W_]{8,}$/
        if (value === '' || value === undefined || value === null) {
          callback()
        } else {
          if (regex.test(value)) {
            return callback()
          } else {
            return callback(new Error('大/小写字母，数字，特殊符号四选三，长度至少6位'))
          }
        }
      },
      // 前端两次密码是否一致
      confirmPwd (rule, value, callback) {
        if (value === '' || value === undefined || value === null) {
          callback()
        } else {
          if (this.pwdForm.getFieldValue('loginPwd') === value) {
            return callback()
          } else {
            return callback(new Error('请确保两次密码输入一致'))
          }
        }
      }
    }
  }
</script>
